// 饼形图定制
(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".pie .chart"));

  // 渲染函数
  function render(data = Config.ageData) {
    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
        position: function(p) {
          return [p[0] + 10, p[1] - 10];
        }
      },
      legend: {
        top: "90%",
        itemWidth: 10,
        itemHeight: 10,
        data: data.map(item => item.name),
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12"
        }
      },
      series: [
        {
          name: "年龄分布",
          type: "pie",
          center: ["50%", "42%"],
          radius: ["40%", "60%"],
          color: Config.colors.pie,
          label: { show: false },
          labelLine: { show: false },
          data: data
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
  }

  // 初始渲染
  render();

  // 监听窗口大小变化
  window.addEventListener("resize", function() {
    myChart.resize();
  });

  // 监听行业选择事件
  EventBus.on("industrySelected", function(industry) {
    // 根据所选行业调整饼图数据
    // 这里使用模拟数据 - 实际应用中可根据行业调整年龄分布
    const factor = industry.value / 300;

    const newData = Config.ageData.map(item => {
      return {
        name: item.name,
        value: Math.max(1, Math.round(item.value * factor))
      };
    });

    render(newData);
  });
})();
